<template>
  <div>
    <!-- 回访记录列表 -->
    <el-card class="visit_card">
      <el-form :model="searchForm" ref="searchRef" inline>
        <el-form-item label="姓名" prop="customerName">
          <el-input
            v-model="searchForm.customerName"
            placeholder="请输入姓名"
            class="form_input"
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="customerTel">
          <el-input
            v-model="searchForm.customerTel"
            placeholder="请输入联系方式"
            class="form_input"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="Search"
            @click="getList()"
            class="btn"
          >
            查询
          </el-button>
          <el-button icon="Refresh" @click="handleReset" class="btn">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="mt-1">
      <div class="w-full flex justify-end items-center">
        <el-button type="primary" icon="Plus" @click="openInsertDrawer"
          >新增</el-button
        >
      </div>

      <el-table :data="tableData" style="height: calc(100vh - 17rem)">
        <el-table-column label="#" :width="100">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="customerName" label="姓名" />
        <el-table-column prop="customerTel" label="联系方式" />
        <el-table-column label="当前状态">
          <template #default="{ row }">
            <el-tag :type="row.isVisited == 1 ? 'success' : 'warning'">
              {{ row.isVisited === 1 ? "已回访" : "待处理" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="截止时间">
          <template #default="{ row }">
            {{ row.estimatedVisitTimeFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="visitResult" label="回访结果">
          <template #default="{ row }">
            <div v-if="row.visitMethod !== 0">
              <el-alert :closable="false" class="mb-1">
                回访方式：{{ getVisitMethod(row.visitMethod) }}
              </el-alert>
              <el-alert :closable="false" style="overflow: hidden">
                回访结果：{{ row.visitResult }}
              </el-alert>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <!-- <el-button type="primary" link @click="openUpdateDrawer(row)">
              <el-icon><Edit /></el-icon>编辑
            </el-button> -->
            <el-button type="danger" link @click="handleDelete(row.id)">
              <el-icon><Delete /></el-icon>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <PagingQuery
        :page="page"
        :pageSize="pageSize"
        :total="total"
        @getList="getList"
        class="mt-1"
      />
    </el-card>

    <el-drawer
      v-model="insert_drawer"
      destroy-on-close
      title="新增回访"
      size="40%"
    >
      <InsertVisit @handleBack="handleBack" />
    </el-drawer>

    <el-drawer
      v-model="edit_drawer"
      destroy-on-close
      title="编辑回访"
      size="40%"
    >
      <UpdateVisit :detailForm="editForm" @handleBack="handleBack" />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import PagingQuery from "@/components/PagingQuery.vue";
import InsertVisit from "./component/InsertVisit.vue";
import UpdateVisit from "./component/UpdateVisit.vue";
import { handleApiResponse } from "@/utils/request.js";
import { GetVisitRecordList } from "../../../../wailsjs/go/api/CustomerApi";

onMounted(() => {
  getList();
});

const searchRef = ref(null);
const searchForm = ref({
  customerName: "",
  sex: 0,
  customerTel: "",
});

const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);
async function getList(e) {
  if (e) {
    page.value = e.page;
    pageSize.value = e.pageSize;
  }
  handleApiResponse(() =>
    GetVisitRecordList({
      page: page.value,
      pageSize: pageSize.value,
      ...searchForm.value,
    })
  ).then((res) => {
    if (res.code == 0) {
      //   console.log(res);
      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;
    }
  });
}

const handleReset = () => {
  searchRef.value.resetFields();
  getList();
};

const visitMethodMap = {
  1: "到店",
  2: "电话",
  3: "短信",
  4: "微信",
};

// 计算属性或方法
const getVisitMethod = (method) => {
  return visitMethodMap[method] || "未知";
};

// 1.新增回访
const insert_drawer = ref(false);
const openInsertDrawer = () => {
  insert_drawer.value = true;
};
const handleBack = (val) => {
  if (val == 1) {
    getList();
  }
  insert_drawer.value = false;
  edit_drawer.value = false;
};

// 2.编辑回访
const edit_drawer = ref(false);
const editForm = ref({});
const openUpdateDrawer = (row) => {
  editForm.value = row;
  edit_drawer.value = true;
};

// 3.删除回访
const handleDelete = (id) => {
  ElMessageBox.confirm("你确定删除这条数据吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    ElMessage.info("紧急开发中...");
  });
};
</script>

<style scoped lang="scss">
.visit_card {
  :deep(.el-form-item) {
    @apply mb-0;
  }
}
</style>